<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1 v-bg="'red'">11111</h1>
    <h2 v-bg="'blue'">2222</h2>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  created() {
    console.log("home实例创建完成");
  },
  activated() {
    console.log("组件被激活");
  },
  //组件被激活的时候调用，使用keep-alive时会调用
  deactivated() {
    console.log("被缓存的组件离开时");
  },
  //被缓存的组件离开时调用
  directives: {
    bg(el, binding) {
      el.style.background = binding.value;
    },
  },
};
</script>
